<template>
  <Modal
    v-model="modal"
    width="80vw"
    :title="originData.title"
    :footer-hide="true"
    :styles="{ top: '10px' }"
  >
  <div class="show-content">
    <div class="artical-view">
      <div>
        分类名称: {{originData.articleCategoryName}}
      </div>
      <div class="artical-contetn artical-contetn-wenzhang">
        <div v-html="originData.content">

        </div>
      </div>
    </div>
    <div class="show-datas">
      <Tabs value="name1">
        <TabPane label="评论" name="name1"><ArticleComment v-if="modal" :staticParams="{articleId: originData.id, parentId: '0'}"/></TabPane>
        <TabPane label="点赞" name="name2"><ArticleLiked v-if="modal" :staticParams="{articleId: originData.id, parentId: '0'}"/></TabPane>
        <TabPane label="浏览" name="name3"><ArticleView v-if="modal" :staticParams="{articleId: originData.id, parentId: '0'}"/></TabPane>
      </Tabs>
    </div>
  </div>
  </Modal>
</template>
<script>
import { seeArticle } from "@/api/pages";
import ArticleComment from "./ArticleComment";
import ArticleLiked from "./ArticleLiked";
import ArticleView from "./ArticleView";

export default {
  components: {
    ArticleComment,
    ArticleLiked,
    ArticleView
  },
  data() {
    return {
      modal: false,
      originData: {},
    };
  },
  methods: {
    show(record) {
      this.originData = { ...record };
      this.$nextTick(()=>{
        this.modal = true;
      })
      seeArticle(record.id).then((res) => {
        if (res.result) {
          this.originData = { 
            // ...record,
            ...res.result,
            articleCategoryName: record.articleCategoryName
            };
            console.log('this.originData', this.originData)
          // this.modalVisible = true;
        }
      });
    },
    ok() {},
    cancel() {
        this.$emit('reload')
      this.modal = false;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./style.scss";
.show-content{
  display: flex;
  .artical-view{
    width: 300px;
    .artical-contetn{
      overflow: auto;
      padding: 10px;
      margin: 5px 10px 0px 0px;
      border-radius: 3px;
      border: 1px solid #efefef;
    }
  }
  .show-datas{
    width: calc(100% - 300px);
  }
}
</style>
